<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<script type="text/javascript" src="js/jquery3.5.1.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/asiox.js"></script>
		<script src="js/common.js"></script>
		<script src="js/elementui.js"></script>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<style>
		#One {
			width: 400px;
			height: 600px;
			width: 450px;
			height: 380px;
			margin-top: 260px;
			padding-right: 30px;
			background-color: rgba(255, 255, 255, 0.282);
			box-shadow: 0px 0px 20px rgba(73, 72, 72, 0.5);
			/* 阴影的大小、模糊度、颜色 */
			border-radius: 40px;
		}

		#app {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
		}

		body {
			height: 100%;
			margin: 0;
			background-image: url("img/aaa.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			/* 背景图片是否重复 */
		}

		a {
			text-decoration: none;
			color: black;
		}
	</style>
	<body>
		<div id="app" style="text-align: center;">
			<div id="One">
				<h2 style="margin-left: 70px;">注册/<a href="login.html">登录</a></h2>
				<el-form :model="user" status-icon :rules="rules" ref="user" label-width="100px" class="demo-user">
					<el-form-item label="账户名:" prop="username">
						<el-input v-model="user.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码:" prop="userpass">
						<el-input type="password" v-model="user.userpass" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="手机号:" prop="phone">
						<el-input v-model="user.phone"></el-input>
					</el-form-item>
					<el-form-item label="职位:" prop="rolename">
						<el-select v-model="user.rolename" multiple placeholder="请选择"
							style="width: 100%; height: 40px;">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('user')">提交</el-button>
						<el-button @click="resetForm('user')">重置</el-button>
					</el-form-item>
				</el-form>
			</div>

		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					options: [],
					user: {
						userid: "",
						username: "",
						userpass: "",
						state: "",
						phone: "",
						rolename: "",
					},
					rules: {
						phone: [{
								required: true,
								message: '请重新输入',
								trigger: 'blur'
							},
							// {
							// 	pattern: /^1[3-9]\d{9}$/,
							// 	message: '手机号格式不正确',
							// 	trigger: 'blur'
							// }
							// {
							// 	min:11,
							// 	message: '手机号格式不正确',
							// 	trigger: 'blur'
							// }
							],
						rolename: [{
							required: true,
							message: '请重新输入',
							trigger: 'change'
						}],
						username: [{
							required: true,
							message: '请重新输入',
							trigger: 'blur'
						}],
						userpass: [{
							required: true,
							message: '请重新输入',
							trigger: 'blur'
						}],
						phone: [{
							required: true,
							message: '请重新输入',
							trigger: 'blur'
						}],
					},

				},
				methods: {
					submitForm() {
						this.$refs.user.validate((valid) => {
							if (valid) {
								axios.get("http://localhost:8082/db137/selectName?name="+this.user.username)
								.then((ccc)=>{
									if(ccc.data){
								axios.get("http://localhost:8082/db137/selectPhone?phone=" + this.user.phone)
									.then((ddd) => {
										// console.log("ddd" + JSON.stringify(ddd));
										if (ddd.data) {
											// console.log(this.user);
											axios.post("http://localhost:8082/db137/insertUsert", {
												userid: 0,
												username: this.user.username,
												userpass: this.user.userpass,
												state: "",
												phone: this.user.phone,
											}).then((res) => {
												axios.get(
														"http://localhost:8082/db137/selectMax")
													.then((aaa) => {
														// console.log(aaa.data);
														axios.post(
															"http://localhost:8082/db137/insertUserrole", {

																id: 0,
																userid: aaa.data,
																roleid: "",
																roleidList: this.user
																	.rolename
															}).then((bbb) => {
															console.log(bbb);
															if (bbb.data ===
																"新增成功") {
																alert("注册成功")
																location.href =
																	"login.html"
															} else {
																alert("注册失败")
															}
														})
													})
											})
										} else {
											alert("您已经注册了账号!")
											location.href = "login.html";
										}
									})
									}else{
										this.user.username=""
										alert("请重新输入用户名!")
									}
									})
							}
						})

					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					selectroleinfo() {
						axios.get("http://localhost:8082/db137/getRoleinfo").then((res) => {
							// console.log(res.data.data.roleinfo);
							for (var i = 0; i < res.data.data.roleinfo.length; i++) {
								let aaa = {
									value: res.data.data.roleinfo[i].roleid,
									label: res.data.data.roleinfo[i].rolename
								}
								this.options.push(aaa)
							}
							// console.log(this.options);

						})
					}
				},
				created() {
					this.selectroleinfo()
				}
			})
		</script>


	</body>
</html>